<template>
	<view class="mineLevel">
		<view class="mineLevel-plate-1">
			<image src="../../../static/ic_my_grade_header_bg.png" mode=""></image>
			<view class="content">
				<view class="head-user">
					<image class="head-pic" :src="avatar_pic" mode=""></image>
					<image class="hefu" src="../../../static/ic_my_grade_bg.png" mode="widthFix"></image>
					<text>{{userInfo.current_level_name}}</text>
				</view>
				<view class="jingyan">
					<text>我的经验：</text>
					<text>{{userInfo.empirical_value}}</text>
				</view>
				<view class="jindutiao">
					<text>{{userInfo.current_level_name}}</text>
					<view class="jidnu-box">
						<view class="yuan">
							
						</view>
						<view class="jindu-bg">
							<view class="jindu" :style="'width:'+ userInfo.empirical_value/userInfo.grade_empirical_current +'%'">
								
							</view>
						</view>
						<view class="yuan">
							
						</view>
					</view>
					<text>{{userInfo.next_level_name}}</text>
				</view>
				<view class="tishii">
					距离升级还差{{userInfo.grade_empirical_diff}}经验值
				</view>
			</view>
		</view>
		<view class="mineLevel-plate-2">
			<view class="mine-title">
				<view class="bian">
					
				</view>
				<text>粉丝权益</text>
				<view class="bian">
					
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in iconArr" :key="index">
					<image :src="item.image" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="mineLevel-plate-3">
			<view class="mine-title">
				<view class="bian">
					
				</view>
				<text>等级说明</text>
				<view class="bian">
					
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in exLvArr" :key="index">
					<image src="../../../static/xiaobai.png" mode="widthFix" v-if="item.empirical_grade_id == 1"></image>
					<image src="../../../static/xinshou.png" mode="widthFix" v-if="item.empirical_grade_id == 2"></image>
					<image src="../../../static/xuezhe.png" mode="widthFix" v-if="item.empirical_grade_id == 3"></image>
					<image src="../../../static/daka.png" mode="widthFix" v-if="item.empirical_grade_id == 4"></image>
					<image src="../../../static/hangjia.png" mode="widthFix" v-if="item.empirical_grade_id == 5"></image>
					<image src="../../../static/zishen.png" mode="widthFix" v-if="item.empirical_grade_id == 6"></image>
					<image src="../../../static/zhuanjia.png" mode="widthFix" v-if="item.empirical_grade_id == 7"></image>
					<image src="../../../static/dashi.png" mode="widthFix" v-if="item.empirical_grade_id == 8"></image>
					<image src="../../../static/mingxing.png" mode="widthFix" v-if="item.empirical_grade_id == 9"></image>
					<text>{{item.grade_empirical}}经验值</text>
				</view>
			</view>
		</view>
		<view class="mineLevel-plate-4">
			<view class="mine-title">
				<view class="bian">
					
				</view>
				<text>经验获取</text>
				<view class="bian">
					
				</view>
			</view>
			<view class="content">
				<view class="item-title">
					<text>操作行为</text>
					<text>经验值</text>
				</view>
				<view class="item" v-for="(i,index) in exMethod" :key="index">
					<view class="item-left">
						<image src="../../../static/time1.png" mode="widthFix"></image>
						<text>{{i.path_name}}</text>
					</view>
					<view class="item-right">
						+{{i.empirical_value}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconArr:[],
				exLvArr:[],//经验等级
				exMethod:[],//经验获取方法
				userInfo:'',
				avatar_pic:uni.getStorageSync('user_info').avatarUrl
			};
		},
		created() {
			this.getUserInfoLv()
			this.getFansIcon()
			this.getExperienceLv()
			this.getExMethod()
		},
		methods:{
			
			// 请求当前用户经验等级
			getUserInfoLv(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/myEmpiricalMes',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.userInfo = res.data.data
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求经验等级
			getExperienceLv(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/empiricalLevelList',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							this.exLvArr = res.data.data
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			},
			// 请求粉丝权益icon
			getFansIcon(){
				uni.request({
				    url:this.$Url +'/index.php/app/users/fans',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
						"token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							this.iconArr = res.data.data
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			},
			// 请求经验获取路径
			getExMethod(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/empiricalPathlList',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							this.exMethod = res.data.data
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.mineLevel{
	width: 100vw;
	min-height: 100vh;
	background-color: #fff;
	.mineLevel-plate-1{
		position: relative;
		>image{
			width: 100vw;
			height: 520upx;
		}
		.content{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100vw;
			height: 520upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.head-user{
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				.head-pic{
					width: 136upx;
					height: 136upx;
					border-radius: 50%;
					
				}
				.hefu{
					width: 240upx;
					position: absolute;
					top: 100upx;
				}
				text{
					position: absolute;
					top: 126upx;
					font-size: 28upx;
					color: #333;
				}
			}
			.jingyan{
				margin-top: 50upx;
				text:first-child{
					color: $zhuti-color;
					font-size: 28upx;
				}
				text:last-child{
					font-size: 28upx;
					color: #fff;
				}
			}
			.jindutiao{
				margin-top: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size: 28upx;
					color: $zhuti-color;
				}
				.jidnu-box{
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 20upx;
					.yuan{
						width: 20upx;
						height: 20upx;
						background-color: $zhuti-color;
						border-radius: 50%;
					}
					.yuan:last-child{
						background-color: #7a7a7a;
					}
					.jindu-bg{
						width: 430upx;
						height: 7upx;
						background-color: #7a7a7a;
						position: relative;
						.jindu{
							width: 40%;
							height: 7upx;
							background-color: $zhuti-color;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
			}
			.tishii{
				color: $zhuti-color;
				font-size: 28upx;
				margin-top: 10upx;
			}
		}
	}
	.mineLevel-plate-2{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 100upx;
		.content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 575upx;
			margin-top: 50upx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				image{
					width: 107upx;
					height: 107upx;
					margin-bottom: 20upx;
				}
				text{
					font-size: 25upx;
					color: #333;
				}
			}
		}
	}
	.mineLevel-plate-3{
		.content{
			width: 660upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 90upx auto 90upx auto;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 175upx;
				margin-bottom: 40upx;
				image{
					width: 136upx;
					margin-bottom: 30upx;
				}
				text{
					color: #333;
					font-size: 28upx;
					text-align: center;
				}
			}
		}
	}
	.mineLevel-plate-4{
		padding-bottom: 100upx;
		.content{
			.item-title{
				width: 100%;
				height: 74upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text:first-child{
					width: 50%;
					text-align: center;
					line-height: 74upx;
					color: #333;
					font-size: 28upx;
				}
				text:last-child{
					width: 30%;
					text-align: center;
					line-height: 74upx;
					color: #333;
					font-size: 28upx;
				}
			}
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 74upx;
				color: #333;
				font-size: 28upx;
				.item-left{
					width: 50%;
					display: flex;
					align-items: center;
					padding-left: 30upx;
					image{
						width: 30upx;
						margin-right: 20upx;
					}
				}
				.item-right{
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: $zhuti-color;
				}
			}
			.item:nth-child(even){
				background-color: #f7f7f7;
			}
			.item:nth-child(odd){
				background-color: #fff;
			}
		}
	}
}
</style>
